<template>
  <el-dialog title="打印" :close-on-click-modal="false" :visible.sync="visible" class="df-dialog cu-dialog cu-dialog_center" lock-scroll width="1100px">
    <el-row :gutter="15">
      <div class="print body-print" id="printMe" ref="printMe" style="font-family: 楷体;">
        <div class="header">
          <div>
            <img src="./img/code.jpg" class="imgBg" />
          </div>
          <div class="header-centent" style="font-size: 40px;">
            贝尔安亲收款电子专用收据
          </div>
          <div class="header-last">
            <span>收据编号：{{ dataForm.enCode }}</span>
            <span>开票日期：{{ custom.toDate(dataForm.createTime, 'yyyy年MM月dd日') }}</span>
          </div>
        </div>
        <table class="print-table">
          <!--          <img class="yz"  src="./img/background.png" style='position: absolute;width: 100%;'/>-->
          <div style="position: absolute;width: 100%;height: 100%;left: 0; top: 0;display: flex;justify-content: center;align-items: center">
            <img class="print-table-bg" src="./img/background.png" style="width: 50%" />
          </div>
          <tr>
            <td rowspan="2" class="cell-width-1 row-height-1 flex-centent">
              <div>
                <span>客</span>
                <span>户</span>
                <span>方</span>
              </div>
            </td>
            <td colspan="4" class="cell-width-4 row-height-1 flex-letter">
              <div class="letter">
                <span>名称</span>
                <span>：</span>
              </div>
            </td>
            <td colspan="4" class="cell-width-4 row-height-1 flex-pandding-25">{{ dataForm.name }}</td>
            <td colspan="4" class="cell-width-4 row-height-1 flex-centent">
              <div>
                <span>加盟品牌：</span>
              </div>
            </td>
            <td colspan="4" class="cell-width-4 row-height-1 flex-pandding-25">{{ dataForm.brand | dynamicCodeText(brandOptions) }}</td>
          </tr>
          <tr>
            <td colspan="4" class="cell-width-4 row-height-1  flex-letter">
              <div class="letter">
                <span>所属区域/学区</span>
                <span>：</span>
              </div>
            </td>
            <td colspan="12" class="cell-width-12 row-height-1 flex-pandding-25">{{ dataForm.campusName == null ? dataForm.area : dataForm.campusName }}</td>
          </tr>
          <tr>
            <td colspan="5" class="cell-width-5 row-height-1 flex-centent">
              <div>项目名称</div>
            </td>
            <td colspan="4" class="cell-width-4 row-height-1 flex-centent">
              <div>金额</div>
            </td>
            <td colspan="8" class="cell-width-8 row-height-1 flex-centent">
              <div>备注</div>
            </td>
          </tr>
          <tr style="height: calc(3 * 61px);">
            <td colspan="5" class="cell-width-5  flex-centent">
              <div>{{ dataForm.brand | dynamicCodeText(brandOptions) }}{{ dataForm.type | dynamicText(typeOptions) }}{{ dataForm.status | dynamicText(statusOptions) }}</div>
            </td>
            <td colspan="4" class="cell-width-4  flex-centent">
              <div>
                {{ dataForm.amount }}
              </div>
            </td>
            <td colspan="8" class="cell-width-8  flex-pandding-25">
              {{ dataForm.description }}
            </td>
          </tr>
          <tr>
            <td colspan="5" class="cell-width-5 row-height-1 flex-centent">
              <div>
                合计（大写）
              </div>
            </td>
            <td colspan="12" class="cell-width-12 row-height-1 flex-pandding-25 flex">
              <div class="details">
                <div>
                  <template v-if="getStringSub(dataForm.amount, 1, 5) !== ''">
                    <span class="s-text">{{ getStringSub(dataForm.amount, 1, 5) }}</span>
                    拾
                  </template>
                  <template v-if="getStringSub(dataForm.amount, 1, 4) !== ''">
                    <span class="s-text">{{ getStringSub(dataForm.amount, 1, 4) }}</span>
                    万
                  </template>
                  <template v-if="getStringSub(dataForm.amount, 1, 3) !== ''">
                    <span class="s-text">{{ getStringSub(dataForm.amount, 1, 3) }}</span>
                    仟
                  </template>
                  <template v-if="getStringSub(dataForm.amount, 1, 2) !== ''">
                    <span class="s-text">{{ getStringSub(dataForm.amount, 1, 2) }}</span>
                    百
                  </template>
                  <template v-if="getStringSub(dataForm.amount, 1, 1) !== ''">
                    <span class="s-text">{{ getStringSub(dataForm.amount, 1, 1) }}</span>
                    拾
                  </template>
                  <template v-if="getStringSub(dataForm.amount, 1, 0) !== ''">
                    <span class="s-text">{{ getStringSub(dataForm.amount, 1, 0) }}</span>
                    元
                  </template>
                  <template v-if="getStringSub(dataForm.amount, -1, 5) !== ''">
                    <span class="s-text">{{ getStringSub(dataForm.amount, -1, 0) }}</span>
                    角
                  </template>
                  <template v-if="getStringSub(dataForm.amount, -11, 5) !== ''">
                    <span class="s-text">{{ getStringSub(dataForm.amount, -1, 1) }}</span>
                    分
                  </template>
                </div>
                <div style="margin-right: 150px;">（小写）¥ {{ dataForm.amount }}元</div>
              </div>
            </td>
          </tr>
          <tr>
            <td rowspan="2" class="cell-width-1 row-height-2 flex-centent">
              <div>
                <span>开</span>
                <span>具</span>
                <span>方</span>
              </div>
            </td>
            <td colspan="4" class="cell-width-4 row-height-1  flex-letter">
              <div class="letter">
                <span>名称</span>
                <span>：</span>
              </div>
            </td>
            <td colspan="7" class="cell-width-7 row-height-1 flex-centent">
              <div>
                湖南贝尔安亲云教育有限公司
              </div>
            </td>
            <td rowspan="2" class="cell-width-1 row-height-2 flex-centent">
              <div>
                <span>签</span>
                <span>章</span>
              </div>
            </td>
            <td colspan="4" rowspan="2" class="cell-width-4 row-height-2"></td>
          </tr>
          <tr>
            <td colspan="4" class="cell-width-4 row-height-1   flex-letter">
              <div class="letter">
                <span>社会信用代码</span>
                <span>：</span>
              </div>
            </td>
            <td colspan="7" class="cell-width-4 row-height-1 flex-centent">
              <div>
                91430100074951239N
              </div>
            </td>
          </tr>
        </table>

        <span style="color: #454545; font-size: 14px">
          本电子收据为我公司确定的合法收款凭证，请妥善保管，打印有效。
        </span>
        <div style="display: flex;justify-content: space-between;margin-top: 20px; position: relative; color: #454545; font-size: 14px">
          <span>开票人：{{ dataForm.createUserName }}</span>
          <span style="margin-right: 120px">经手人：{{ dataForm.manageName }}</span>
          <img class="yz" src="./img/yz.png" />
        </div>
      </div>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <!--      <el-button type="primary" @click="onPrint()">打 印</el-button>-->
      <el-button :loading="down" type="primary" @click="exportToPDF()" style="margin-right: 50px">下载收据</el-button>
    </span>
  </el-dialog>
</template>
<script>
export { default } from './index.js'
</script>
<style scoped>
.el-time-spinner__wrapper {
  width: 100% !important;
}

@import url(index.scss);
</style>
